<template>
<view class="container">
  <view class="info">
        <image src="/static/images/message.webp" class="image"></image>
        
        <view class="button">
          <button class="left">取消</button>
          <button class="right">同意</button>
        </view>
  </view>
</view>
</template>

<script>
export default {
  data() {
    return {

    };
  }
};
</script>

<style>
	page{
		background-image: url('https://gd-hbimg.huaban.com/fbc1ecb9f833d5052e2e04c4d989429ab755aa74139c2-cTh95c_fw480webp');
		background-size: 100% 100%;
	}
</style>

<!--  -->
<style lang="less" scoped>
.container {
    display: flex;          /* 启用flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    height: 650px;          /* 给外部view设置一个高度，以便可以垂直居中 */
  .info{
    background-color: azure;
    height: 220px;
    width: 250px;
    border-radius: 20px;

    .image {
      /* 可以设置图片的宽度、高度等样式 */
      width: 200px; 
      height: 150px;
      margin-left: 20px;
      margin-right: 20px;
    }


  .button{
      height: 50px;
      display: flex;          /* 启用flexbox布局 */
      justify-content: space-between; /* 按钮分布在两侧，并且中间的空间平分 */
      align-items: center; 
    .left{}
    .right{}
  }
}
}


</style>

